<template>
    <div class="container">
        <div class="body_wrap">
            <div class="card_wrap">
                <el-card shadow="hover" class="card_left">
                    <div class="tools">
                        <el-input placeholder="输入关键字进行过滤" v-model="filterText" clearable size="medium" style="margin-right: 10px;"></el-input>
                        <el-button type="primary" @click="handleAddRootVisible()" icon="el-icon-plus" size="medium"></el-button>
                        <el-button type="danger" @click="handleBatchDelete()" icon="el-icon-delete" size="medium"></el-button>
                    </div>
                    <div class="tree_wrap">
                        <el-tree
                            v-loading="loading"
                            show-checkbox
                            node-key="id"
                            ref="menus"
                            :data="tree"
                            :props="defaultProps"
                            :default-expand-all="true"
                            :expand-on-click-node="false"
                            :filter-node-method="filterNode"
                            @node-click="handleNodeClick">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ node.label }}</span>
                                <span>
                                    <el-button :disabled="node.level > 2" type="text" size="mini" @click="append(data)">添加</el-button>
                                    <el-button type="text" size="mini" @click="edit(data)">编辑</el-button>
                                    <el-button :disabled="!node.childNodes.length==0" type="text" size="mini" @click="remove(node, data)">删除</el-button>
                                </span>
                            </span>
                        </el-tree>
                    </div>
                </el-card>

                <el-card shadow="hover" class="card_right">
                    <SysPermission :menu="detail" />
                </el-card>
            </div>

        </div>

        <!-- 弹窗, 新增 / 修改 -->
        <AddOrUpdate ref="addOrUpdate" @refreshDataList="getListWithTree"></AddOrUpdate>

    </div>
</template>

<script>
import AddOrUpdate from './add-or-update-dialog'
import SysPermission from '@/views/system/syspermission'
export default {
    components: {
        AddOrUpdate,
        SysPermission
    },

    data() {
        return {
            loading: false,
            tree: [],
            info: [],
            filterText: "",
            defaultProps: {
                label: 'name',
                children: 'children'
            },

            detail: {}
        }
    },

    created() {
    },

    mounted() {
        this.$nextTick(() => {
            this.getListWithTree()
        })
    },

    //监控data中的数据变化
    watch: {
        filterText(val) {
            this.$refs.menus.filter(val);
        }
    },

    methods: {
        /**
         * 添加一级节点
         */
        handleAddRootVisible() {
            this.$nextTick(() => {
                this.$refs.addOrUpdate.addRoot()
            })
        },
        /**
         * 添加子节点
         */
        append(data) {
            this.$nextTick(() => {
                this.$refs.addOrUpdate.append(data)
            })
        },
        /**
         * 编辑节点
         */
        edit(data) {
            this.$nextTick(() => {
                this.$refs.addOrUpdate.edit(data)
            })
        },
        /**
         * 删除节点
         */
        remove(node, data) {
            this.handleDelete(data)
        },

        /**
         * 树节点过滤
         */
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        /**
         * 获取节点详情
         */
        handleNodeClick(data, node, e) {
            this.detail = data
        },

        /**
         * 删除
         */
        async handleDelete(row) {
            let ids = []
            if (row) {
                ids.push(row.id)
            }
            if(this.selectionRows) {
                this.selectionRows.filter((item, index) => {
                    ids.push(item.id)
                })
            }
            if (ids.length <= 0) {
                this.$notify({ title: '提示', message: '请选择需要删除的记录！', type: 'info' });
            } else {
                this.handleRemove(ids)
            }
        },

        /**
         * 批量删除
         */
        async handleBatchDelete() {
            let menuIds = [];
            let checkedNodes = this.$refs.menus.getCheckedNodes();

            if(checkedNodes.length > 0) {
                for (let i = 0; i < checkedNodes.length; i++) {
                    menuIds.push(checkedNodes[i].id);
                }
                this.handleRemove(menuIds)
            } else {
                this.$notify({ title: '提示', message: '请选择需要删除的数据', type: 'warning' });
            }
        },

        async handleRemove(ids) {
            const confirm = await this.$confirm('确定要删除？', '提示', { type: 'warning' }).catch(() => {})
            if(confirm) {
                const res = await this.$http({
                    url: '/system/sysmenu/delete',
                    method: 'POST',
                    data: ids
                })
                if (this.ResultMessage(res)) {
                    this.getListWithTree()
                }
            }
        },

        /**
         * 获取表格数据
         */
        async getListWithTree() {
            this.loading = true
            const res = await this.$http({
                url: '/system/sysmenu/listWithTree',
                method: 'GET'
            })
            if (this.ResultMessage(res, false)) {
                this.tree = res.data
            }
            this.loading = false
        },

        /**
         * 重新加载数据表格
         */
        handleReload() {
            this.getDataList()
        }
    }

}
</script>

<style lang="scss" scoped>
.tools{
    margin-bottom: 5px;
    display: flex;
    justify-content: flex-end;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.card_wrap{
    display: flex;
    .card_left {
        margin-right: 20px;
        min-width: 400px;
        .tree_wrap{
            margin-top: 5px;
            height: calc(100vh - 260px);
            overflow: hidden;
            overflow-y: auto;
            &::-webkit-scrollbar {
                display: none;
            }
        }
    }

    .card_right{
        width: 100%;
    }
}
</style>
